<template >
    <div class="zero">

        <van-nav-bar
                class="title"
                title="账户安全"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />

        <table >
            <tr>
                <td class="one">请完成以下认证</td>
            </tr>

            <tr>
                <td class="two">请输入{{phone}}收到的短信验证码</td>
            </tr>


                <van-field
                        class="three"
                        v-model="value2"
                        center
                        name="验证码"
                        placeholder="请输入短信验证码"
                >
                    <template #button style="margin-left: 156px;">
                        <!--color="linear-gradient(to right,#7232dd, #7232dd, #ff6034, #ee0a24)"-->
                        <van-button
                                color="red"
                                size="small"
                                :disabled="disabled"
                                @click="sendCode"
                                type="primary">
                            {{codeBtnText}}</van-button>
                    </template>
                </van-field>

                <!--<van-cell-group style="margin-top: 30px" >
                    <van-field v-model="value2" clearable  placeholder="请输入验证码" />
                </van-cell-group>-->

                <van-button
                        class="four"
                        style="margin-top: 60px"
                        size="25"
                        color="red"
                        round block type="info"
                        native-type="submit"
                        @click="handleLogin2">
                    下一步
                </van-button>



        </table>

    </div>
</template>

<script>
    import axios from "axios"
    export default {
        name: "ModifyPassword",
        data(){
            return {
                sms: '',
                time: 0,
                codeBtnText: '获取验证码',
                userId: this.users.userId,
                value2: '',
                disabled: false,
                phone: '',
            }
        },
        created() {
            this.start();
        },
        methods: {
            start(){
                var storage = window.localStorage;
                var user = JSON.parse(storage.getItem("user"));
                axios.get('http://localhost:8001/sign/redisQuery',{
                    params: {
                        uid: user
                    }
                }).then(result => {
                    if (result.data != ""){
                        var reg = /^(\d{3})\d{4}(\d{4})$/;
                        replace(reg, '$1****$2')

                        this.phone = result.data.userPhoneNumber;
                    }else{
                        this.$router.push("/login");
                    }
                });
            },
            onClickLeft(){
                this.$router.back();
            },
            sendCode(){

                this.time = 120;
                this.disabled = true;
                this.timer();


                    axios.get('http://localhost:8001/sign/alter',{
                        params: {
                            value: result.data.userPhoneNumber
                        }
                    }).then(resvers => {
                        if (resvers.data.userId == 200){
                            this.$toast(resvers.data.userName);
                        }else{
                            this.$toast(resvers.data.userName);
                        }
                    });
            },
            timer() {
                if (this.time > 0) {
                    this.time--;
                    this.codeBtnText = this.time + "s后获取";
                    setTimeout(this.timer, 1000);
                } else {
                    this.time = 0;
                    this.codeBtnText = "获取验证码";
                    this.disabled = false;
                }
            },
            handleLogin2(){
                if (this.value2.length == 6 && /^\d{6}$/.test(this.value2)){

                        this.$router.push("/FinalPassword");
                }else{
                    this.$toast('验证码为 6 位数字');
                }
            }
        },
    }
</script>

<style scoped>
    .zero{
        background-color: #ebedf0;
        width: 750px;
        height: 2000px;
    }
.one{
    font-size: 40px;
    letter-spacing: 3px;
    position: relative;
    left: 100px;
    top: 50px;
}
    .two{
        letter-spacing: 2px;
        position: relative;
        top: 100px;
        left: 100px;
    }
    .three{
        position: relative;
        top: 120px;
        left: 70px;
    }
    .four{
        position: relative;
        top: 120px;
        left: 70px;
    }
</style>
